import React from 'react'
import Swiper from '@/components/swiper/Swiper'

import swiper1 from '@/assets/images/swiper-1.png'
import swiper2 from '@/assets/images/swiper-2.jpeg'
import swiper3 from '@/assets/images/swiper-3.jpeg'

function CookbookSwiper() {
  const dataSource = [
    {
      img: swiper1,
      path: '/abc/def'
    },
    {
      img: swiper2,
      path: '/abc/def'
    },
    {
      img: swiper3,
      path: '/abc/def'
    }
  ]

  const renderFullWidthItem = (item, index) => {
    return (
      <div className="package-car-img" style={{height:'2.5rem'}}>
        <img width="100%" src={item.img} alt="" />
      </div>
    )
  }

  const itemClick = (item, index) => {
    console.log(item.path)
  }

  return (
    <div>
      <Swiper
        wrapperClass="wrapperClass"
        itemClass="itemClass"
        itemWidth="100%"
        curIdx={1}
        dataList={dataSource}
        activeClass="active"
        renderItem={renderFullWidthItem}
        itemClick={itemClick}
      ></Swiper>
    </div>
  )
}

export default CookbookSwiper
